<template>
  <div id="mapbox-container"></div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'
import mapboxgl from './mapbox.js'
import U from 'mapbox-gl-utils'
import axios from 'axios'
// import MapboxDraw from '@mapbox/mapbox-gl-draw'
// import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { Threebox, THREE } from 'threebox-plugin'

defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
let map = null

let mapconfig = null
const emit = defineEmits(['onload'])
const { proxy } = getCurrentInstance()

onMounted(() => {
  loadConfig()
})

// 同步加载底图配置信息
async function loadConfig() {
  const config = await axios.get(import.meta.env.VITE_APP_PATH + 'config/config.json').catch((err) => console.log(err))

  console.log(config.data)
  mapconfig = proxy.$root.$mapconfig = config.data.schoolMap
  initMap()
}

// 根据配置信息初始化地图
function initMap() {
  const option = mapconfig.campus[0]
  // 初始化创建mapbox地图

  map = new mapboxgl.Map({
    container: 'mapbox-container',
    style: 'mapbox://styles/mapbox/streets-v11',
    // style: 'mapbox://styles/mapbox/satellite-streets-v11',
    center: option.mapcenter, // 郑大西校区
    zoom: option.zoom,
    pitch: 56,
    bearing: -35.2
  })
  // mapboxgl.setRTLTextPlugin(
  //   'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
  // )
  // map.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}))
  // map.addControl(new MapboxDraw(), 'bottom-right')

  // 初始化threebox对象并加到全局环境---只能放在这，放在map创建完成后load中模型移动不生效
  window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {
    defaultLights: true,
    // realSunlight: true,
    enableSelectingFeatures: true, //模型是否可以被选择
    enableSelectingObjects: true, //模型是否可以被选中
    enableDraggingObjects: true, //模型是否可以被拖动和移动
    enableRotatingObjects: true, //模型是否可以被旋转
    enableTooltips: true // 模型是否显示标签
  })

  // 等map创建完成后加载建筑图层
  map.on('load', function () {
    // Start the animation.
    // rotateCamera(0)

    // Add 3d buildings and remove label layers to enhance the map
    // const layers = map.getStyle().layers;
    // for (let i = 0; i < layers.length; i++) {
    // console.log(layers[i]);
    // if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
    // remove text labels
    // map.removeLayer(layers[i].id)
    // }
    // }

    // 初始化mapbox工具类
    U.init(map)

    // 创建天空盒
    map.setFog({
      'horizon-blend': 0.3,
      color: '#f8f0e3',
      'high-color': '#add8e6',
      'space-color': '#d8f2ff',
      'star-intensity': 0.0
    })

    // 抛出map创建完成事件
    emit('onload', map)

  })
  map.on('click', function (e) {
    // console.log("----click----");
    // console.log(e.point);
    // console.log(e.lngLat);
  })
  map.on('dblclick', function (e) {
    // console.log("----dblclick----");
  })
  map.on('wheel', function () {
    // console.log("----wheel----");
    // console.log(map.getZoom());
  })
}


</script>

<style>
#mapbox-container {
  width: 100%;
  height: 100%;
}
</style>
